<template>
	<view class="loadMore" v-if="status != 'hide'">
		<view class="wait" v-if="status == 'loading'"></view>
		<view class="nomore" :style="{ color: fontColor }" v-else-if="status == 'end'">已完成全部加载</view>
		<view class="fail" v-else-if="status == 'fail'" @click="retry">加载失败，点击重试</view>
	</view>
</template>
 
<script>
	export default{
		data(){
			return {}
		},	
		props:{
			status:{
				type:String,
				default:'hide'//取值hide:隐藏； loading:加载中动画; end:没有更多内容
			},
			fontColor: {
				type:String,
				default: '#999'//取值hide:隐藏； loading:加载中动画; end:没有更多内容
			}
		},
		methods:{
			retry () {
				this.$emit('retry')
			}
		}
	}
</script>

<style lang="scss">
	.loadMore{
		text-align: center; 
		background-color: #fff;
		.wait{background-image: url('https://ss.migudm.cn/malleoc/public/loadmore.png'); width: 60rpx; height: 50rpx; animation: loadAnimation 0.80s steps(1) infinite; background-size: auto 100%; display: inline-block;
		}
		.nomore{font-size: 26rpx; color: #999;}
		.fail {
			font-size: 26rpx; 
			font-weight: 500;
			color: #ff004f;
		}
	}
</style>
